
import React, { useState,useEffect } from "react";


// 另外迅雷还有一个很好的功能可以选择全速下载模式和不影响正常上网的模式，因为下载时可能会挤占带宽影响用户正常浏览网页。
// 其中的原理就是迅雷在下载的时候在不停做 ping，如果发现 ping 的延迟增加，就限制下载速度，如果 ping 还高，就继续降到 ping 回归期望值。



export default function Dashboard () {
  const [ping, setPing] = useState(0);
  const [count, setCount] = useState(0);
  // const [pingList, setPingList] = useState<number[]>([]);
  const [pingList, setPingList] = useState([]);
  const [jitter, setJitter] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      const img = new Image();
      const startTime = new Date().getTime();
      // 此处选择加载 github 的 favicon，大小为2.2kB
      img.src = `https://github.com/favicon.ico?d=${startTime}`;
      img.onload = () => {
        const endTime = new Date().getTime();
        const delta = endTime - startTime;
        // 五次取一次ping值，并重新开始计算
        if ((count + 1) % 5 === 0) {
          const maxPing = Math.max(delta, ...pingList);
          const minPing = Math.min(delta, ...pingList);
          setJitter(maxPing - minPing);
          setPingList([]);
        } else {
          setPingList(lastList => [...lastList, delta]);
        }
        setCount(count + 1);
        setPing(delta);
      };
      img.onerror = err => {
        // console.log('error', err);
      };
    }, 3000);
    return () => clearInterval(timer);
  }, [count, pingList]);

  return (1
    // TODO:You may need an appropriate loader to handle this file type, 
    // currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    // <div>22</div>
    // <PageContainer className={styles.dashboard}>
      //  <div className="text-center">
      //   <h1>欢迎使用 仓储管理系统</h1>
      //   <h1>PING: {ping}ms</h1>
      //   <h1>抖动: {jitter}ms</h1>
      // </div>
    // </PageContainer>
  );
}
